<template>
  <div class="homeEntry">
    <!-- 左侧分类 -->
    <div class="Cate" @mouseleave="indexs = null">
      <!-- 分类 -->
      <ul class="leftCate">
        <li
          :class="{ liang: indexs == index }"
          v-for="(item, index) in leftCate"
          :key="item.id"
          @mousemove="indexs = index"
        >
          <span>{{ item.name }}</span>
          <!-- 标题 -->
          <template v-if="item.children">
            <p v-for="it in item.children" :key="it.id">
              <span>{{ it.name }}</span>
            </p>
          </template>
          <!-- 骨架屏 -->
          <template v-if="!item.children">
            <Skeleton width="50px" height="20px"></Skeleton>
            <Skeleton width="30px" height="20px"></Skeleton>
          </template>
        </li>
      </ul>
      <!-- 弹层 -->
      <div class="bombLayer">
        <h4>
          {{ dealWithRecommend.title == "cate" ? "分类" : "品牌" }}推荐<small
            >根据您的购买浏览记录推荐</small
          >
        </h4>
        <ul v-if="dealWithRecommend.title == 'cate'" class="recommend">
          <li v-for="(item, index) in dealWithRecommend.goods" :key="index">
            <img :src="item.picture" alt="" />
            <div class="right">
              <p>{{ item.name }}</p>
              <p>
                {{ item.desc }}
              </p>
              <p><i>￥</i>{{ item.price }}</p>
            </div>
          </li>
        </ul>
        <ul v-else class="recommend2">
          <li v-for="(item, index) in dealWithRecommend.goods" :key="index">
            <img :src="item.picture" alt="" />
            <div class="right">
              <p>{{ item.place }}</p>
              <p>{{ item.name }}</p>
              <p>
                {{ item.desc }}
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 轮播图 -->
    <HomeBanner class="homeBanner"></HomeBanner>
  </div>
</template>

<script>
// 引入api
import { getBrand } from "@/utils/Api/HomeApi";
// 引入首页轮播图
import HomeBanner from "../Home/HomeBanner.vue";
export default {
  components: {
    HomeBanner,
  },
  data() {
    return {
      // 下标初始值为-1 因为为0的话页面刷新的时候会默认显示
      indexs: null,
      //品牌数据
      brand: [],
    };
  },
  computed: {
    // 拿到分类数据 一级分类 带两个二级
    leftCate() {
      //现在渲染的没有品牌数据 创建一个
      let obj = {
        id: "brand",
        name: "品牌",
        children: [
          {
            id: "childrenId",
            name: "品牌推荐",
          },
        ],
      };
      let list = this.$store.state.Category.cate.map((item) => {
        return {
          id: item.id,
          name: item.name,
          children: item.children && item.children.slice(0, 2),
        };
      });
      list.push(obj);
      return list;
    },
    // 处理分类推荐数据
    dealWithRecommend() {
      let obj = {
        title: "",
        goods: [],
      };
      if (this.indexs <= 8 && this.indexs != null) {
        // 判断下标小于8的时候  是滑过goods数组是前九个数据
        return (obj = {
          title: "cate",
          goods: this.$store.state.Category.cate[this.indexs].goods,
        });
      } else {
        // 大于8就是品牌数据
        return (obj = {
          title: "brand",
          goods: this.brand,
        });
      }
    },
  },
  methods: {
    //获取品牌数据
    async getBrandList() {
      let { data } = await getBrand();
      this.brand = data.result;
    },
  },
  mounted() {
    this.getBrandList();
  },
};
</script>

<style lang="scss" scoped>
.homeEntry {
  width: 100%;
  height: 500px;
  position: relative;

  .leftCate {
    width: 250px;
    height: 500px;
    background-color: rgb(0, 0, 0, 0.8);
    color: white;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 123;
    li {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center !important;
      padding-left: 40px;
      &:hover {
        background-color: #27ba9b;
      }
      span {
        &:nth-child(1) {
          margin-right: 4px;
          cursor: pointer;
        }
      }
      p {
        font-size: 12px;
      }
    }
  }
}
.liang {
  background-color: #27ba9b;
}
.Cate {
  width: 250px;
  height: 500px;
}
.bombLayer {
  width: 0;
  overflow: hidden;
  height: 0;
  background-color: rgba(207, 204, 204, 0.3);
  position: absolute;
  top: 0;
  right: 0;
  padding: 0px 20px;
  z-index: 456;
  h4 {
    font-size: 20px;
    font-weight: 400;
    line-height: 80px;
    small {
      margin-left: 5px;
    }
  }
  .recommend2 {
    width: 100%;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    li {
      width: 30%;
      height: 170px;
      background-color: white;
      border: 1px solid rgb(180, 178, 178);
      border-radius: 5px;
      padding: 10px;
      display: flex;
      align-items: center;
      &:hover {
        background-color: #e3f9f4;
      }
      img {
        width: 150px;
        height: 150px;
        margin-right: 10px;
      }
      .right {
        width: 100%;
        height: 95px;
        // background-color: gold;
        padding: 10px 0;
        p {
          width: 160px;
          &:nth-child(2) {
            font-size: 18px;
            color: gray;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 10px;
          }
          &:nth-child(1) {
            font-size: 14px;
            color: #ccc;
            margin-bottom: 10px;
          }
          &:nth-child(3) {
            font-size: 14px;
            color: #ccc;
          }
        }
      }
    }
  }
  .recommend {
    width: 100%;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    // background-color: antiquewhite;
    li {
      width: 30%;
      height: 120px;
      background-color: white;
      border: 1px solid rgb(180, 178, 178);
      border-radius: 5px;
      padding: 10px;
      display: flex;
      align-items: center;
      &:hover {
        background-color: #e3f9f4;
      }
      img {
        width: 95px;
        height: 95px;
        // background-color: pink;
        margin-right: 10px;
      }
      .right {
        width: 100%;
        height: 95px;
        // background-color: gold;
        padding: 10px 0;
        p {
          width: 160px;
          &:nth-child(2) {
            font-size: 12px;
            color: gray;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          &:nth-child(3) {
            i {
              font-size: 16px;
            }
            font-size: 20px;
            color: red;
          }
        }
      }
    }
  }
}

.Cate:hover {
  .bombLayer {
    width: 990px;
    height: 500px;
  }
}
</style>
